<script setup>
    import { getCurrentInstance } from 'vue';
    import { useRouter} from 'vue-router'
    import { useStore } from 'vuex';
    const store = useStore();
    const router = useRouter();

    const axios = getCurrentInstance().proxy.$http;
    let hotRecommendData = await axios.get('/personalized?limit=12');
    hotRecommendData = hotRecommendData?.data.result

    const toPlayList = (id, playCount) => {
        router.push({name: 'playlist', query: {id}})
        localStorage.setItem('playCount', playCount);
    }


</script>

<template>
    <div class="hot">
    <header class="header-hot">
        <div class="header-left">
            <div class="point">
                <div class="tag"></div>
            </div>    
            <em>热门推荐</em>
        </div>
        <ul class="hot-recommend">
            <li>话语</li>
            <li>|</li>
            <li>流行</li>
            <li>|</li>
            <li>摇滚</li>
            <li>|</li>
            <li>民谣</li>
            <li>|</li>
            <li>电子</li>
        </ul>
        <div class="header-more">
            <span>更多</span>
            <img src="../../../assets/img/header-right.png" alt="">
        </div>
    </header>
    <main class="hot-main"></main>
        <ul class="hot-main">
            <li
                v-for="(item, index) of hotRecommendData" 
                :key="index"
            >
                <div class="img">
                    <img 
                        @click="toPlayList(item.id, item.playCount)"
                        :src="item.picUrl"
                    >
                    <div class="buttom">
                        <div class="playCount">
                            <img src="../../../assets/img/headset.png" alt="">
                            <span>{{item.playCount}}</span>
                        </div>
                        <img 
                            src="../../../assets/img/play-circle.png"
                        >
                    </div>
                </div>
                <section>{{item.name}}</section>
            </li>
        </ul>
    </div>
</template>

<style lang='less' scoped>
    .hot{
        .header-hot{
            height: 40px;
            border-bottom: 2.5px solid #c70c0c; 
            background-color: transparent;
            display: flex;
            align-items: center;
            
            .header-left{
                display: flex;
                align-items: center;
                .point{
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: #c70c0c;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 10px;
                    .tag{
                        width: 40%;
                        height: 40%;
                        background-color: white;
                        border-radius: 50%;
                    }
                }
                em{
                    font-size: 20px;
                    cursor: pointer;
                }
            }

            .hot-recommend{
                margin-left: 20px;
                display: flex;
                li{
                    margin-right: 10px;
                    color: #333;
                    font-size: 13px;
                    &:nth-child(2n+1) {
                        cursor: pointer;
                        user-select: none;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                }
            }

            .header-more{
                display: flex;
                align-items: center;
                margin-left: auto;
                span{
                    font-size: 13px;
                    cursor: pointer;
                    &:hover{
                        text-decoration: underline;
                    }
                }
                img{
                    margin-left: 10px;
                    width: 12px;
                }
            }
        }
        
        
        .hot-main{
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
                width: 140px;
                margin-top: 20px;
                margin-bottom: 20px;
                .img{
                    width: 140px;
                    height: 140px;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        cursor: pointer;
                    }
                    .buttom{
                        position: absolute;
                        width: 100%;
                        bottom: 0px;
                        left: 0px;
                        height: 25px;
                        line-height: 25px;
                        background: rgba(0, 0, 0, 0.6);
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .playCount{
                            display: flex;
                            color: #ccc;
                            font-size: 12px;
                            img{
                                margin-top: 2px;
                                margin-left: 7px;
                                margin-right: 5px;
                            }
                            span{
                                font-size: 8px;
                            }
                        }
                        img{
                            width: 20px;
                            height: 20px;
                            &:last-child{
                                cursor: pointer;
                                margin-right: 10px;
                                &:hover{
                                    box-shadow: 0 0 5px 1px white;
                                    border-radius: 50%;
                                }
                            }
                        }
                    }
                }
                section{
                    width: 140px;
                    height: 60px;
                    font-size: 13px;
                    line-height: 20px;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
</style>